<template>
    <g v-bind="$attrs">
        <!-- 定义箭头标记 -->
        <defs>
            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
                orient="auto-start-reverse">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
            </marker>
        </defs>
        <!-- 绘制连线 -->
        <BaseEdge :id="id" :path="path[0]" :marker-end="`url(#arrow)`" :label-x="path[1]" :label-y="path[2]"
            label-bg-style="fill: whitesmoke" />
        <!-- 显示 label -->
        <text :x="path[1]" :y="path[2]" text-anchor="middle" dominant-baseline="middle" fill="black">
            {{ data?.lineName }}
        </text>
    </g>
</template>

<script setup>
import { ref, computed } from 'vue';
import { BaseEdge, getBezierPath, getSmoothStepPath } from '@vue-flow/core';
const { proxy } = getCurrentInstance();
const emits = defineEmits(['handleUpdateLabel']);

const props = defineProps({
    id: {
        type: String,
        required: true,
    },
    sourceX: {
        type: Number,
        required: true,
    },
    sourceY: {
        type: Number,
        required: true,
    },
    targetX: {
        type: Number,
        required: true,
    },
    targetY: {
        type: Number,
        required: true,
    },
    sourcePosition: {
        type: String,
        required: true,
    },
    targetPosition: {
        type: String,
        required: true,
    },
    source: {
        type: String,
        required: true,
    },
    target: {
        type: String,
        required: true,
    },
    data: {
        type: Object,
        required: false,
    },
    stroke: {
        type: String,
        required: false,
        default: '#2694ff', // 默认颜色
    },
});
// const path = computed(() => getBezierPath(props));
const path = computed(() => getSmoothStepPath(props));
const markerId = computed(() => `${props.id}-marker`);

const handleUpdateLabel = () => {
    emits('handleUpdateLabel', props.id)
}

</script>